<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { $t } from '@vben/locales';
import { getSystemInfo } from '#/api/system';

const lang: any = {
  OPERATING_SYSTEM: $t('admin.operatingSystem'),
  OPERATING_ENVIRONMENT: $t('admin.runtimeEnvironment'),
  PHP_VERSION: $t('admin.phpVersion'),
  PHP_RUN_MODE: $t('admin.phpMode'),
  MYSQL_VERSION: $t('admin.mysqlVersion'),
  CURL: 'CURL',
  OpenSSL: 'OpenSSL',
  ThinkPHP: 'ThinkPHP',
  ThinkCMF: 'ThinkCMF',
  UPLOAD_MAX_FILESIZE: $t('admin.uploadLimit'),
  MAX_EXECUTION_TIME: $t('admin.maxExecutionTime'),
  DISK_FREE_SPACE: $t('admin.remainingSpace'),
};
const columns: any = ref([]);
async function onSearch() {
  const {
    data: { item },
  } = await getSystemInfo();
  const result: any = Object.entries(item).map(([key, value]) => ({
    label: lang[key],
    content: value,
  }));

  columns.value = [...result, ...columns.value];
}
onMounted(() => {
  onSearch();
});
</script>

<template>
  <div class="card-box p-5">
    <div>
      <h5 class="text-foreground text-lg">{{$t('admin.systemInfo')}}</h5>
    </div>
    <div class="mt-4">
      <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
        <template v-for="item in columns" :key="item.label">
          <div class="border-border border-t px-4 py-6 sm:col-span-1 sm:px-0">
            <dt class="text-foreground text-sm font-medium leading-6">
              {{ item.label }}
            </dt>
            <dd class="text-foreground mt-1 text-sm leading-6 sm:mt-2">
              {{ item.content }}
            </dd>
          </div>
        </template>
      </dl>
    </div>
  </div>
</template>
